<template>
<view class="page-container">
    
    <view class="form-card">
      <view class="form-item">
        <text class="label">输入值：</text>
        <input v-model="title" class="input input-red" placeholder="请输入内容" />
      </view>
      <view class="form-item">
        <text class="label">回传值：</text>
        <input :value="callBackValue" class="input input-yellow" disabled placeholder="等待回传..." />
      </view>
    </view>

    <!-- 子组件容器：增加间距和阴影 -->
    <view class="component-wrap">
      <comA :intent="title" @sendToCompB="handleCompAData"></comA>
    </view>
    <view class="component-wrap">
      <comB :compAData="compAData" @callBackFun="callBack"></comB>
    </view>
  </view>
</template>

<script>
import comA from '../../components/compA.vue'
import comB from '../../components/compB.vue'
export default {
  components: { comA, comB },
  data() {
    return {
      title: '',       // 输入框双向绑定的值
      callBackValue: '', // 接收compB的回传值
      compAData: ''    // 中转compA传给compB的数据
    }
  },
  methods: {
    // 接收compA传递的数据，存到compAData中（给compB用）
    handleCompAData(val) {
      this.compAData = val
    },
    // 接收compB的回传值
    callBack(val) {
      this.callBackValue = val
    }
  }
}
</script>
<style scoped>
/* 页面整体样式 */
.page-container {
  padding: 30rpx 20rpx;
  background-color: #f5f5f5;
}

/* 表单卡片样式 */
.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
}

/* 表单项样式 */
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.form-item:last-child {
  margin-bottom: 0;
}

/* 标签样式 */
.label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}

/* 输入框样式 */
.input {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 15rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.input-red {
  color: #e53935; /* 更清晰的红色 */
}
.input-yellow {
  color: #f57c00; /* 更清晰的黄色（避免和背景冲突） */
}

/* 子组件容器样式 */
.component-wrap {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  margin-bottom: 30rpx;
}
</style>